<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-button type="success" icon="Plus" @click="addOpenType=1, addSingleVisible = true">新增</el-button>
            </template>
            <el-table ref="multipleTableRef" v-loading="loading" :data="typeList" stripe>
                <el-table-column label="定制类型" prop="customizedName" align="center"></el-table-column>
                <el-table-column label="工序详情" prop="packingProductCode" align="center">
                    <template #default="scope">
                        <el-button link @click="getProcessDetails(scope.row)" :style="{ fontSize: '15px' }"
                            type="primary">查看详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="updateTime" align="center"></el-table-column>
                <el-table-column label="更新人" prop="updateByName" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="220px">
                    <template #default="scope">
                        <el-tooltip content="详情" placement="top">
                            <el-button @click="handleClickDetail(scope.row)" link :style="{ fontSize: '15px' }" type="success" icon="View"></el-button>
                        </el-tooltip>
                        <el-tooltip content="修改">
                            <el-button @click="modifyList(scope.row)" link :style="{ fontSize: '15px' }" type="primary"
                                icon="EditPen"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button @click="deleteList(scope.row)" link :style="{ fontSize: '15px' }" type="danger"
                                icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <AddType :visible="addSingleVisible" :initList="addSingleObj" :type="addOpenType" @submit="handleAddSubmit"
            @close="handleAddClose" />
        <Details :visible="detailsSingleVisible" :ids="customizedTypeId" @close="detailsSingleVisible = false" />
    </div>
</template>
<script setup lang="ts">
import { type FormInstance, TableInstance, TabsPaneContext } from 'element-plus';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
// import { QueryPackageType, PackageVO } from '@/api/sj/productManagement/finalDraft/types';
import { getFinalDraftListApi, deleteFinalDraftApi } from '@/api/sj/productManagement/finalDraft/index';

import AddType from './components/addType.vue'
import Details from './components/details.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const multipleTableRef = ref<TableInstance>()

const data = reactive<pageDataOnlyQuery<any>>({
    queryParams: {
        pageSize: 10,
        pageNum: 1
    }
});

const typeList = ref<any>([])

const { queryParams } = toRefs(data);
const totalData = ref(0);
const loading = ref(false);

const addSingleVisible = ref(false); // 新增定制类型弹窗 key
const addSingleObj = ref({}); // 查新详情的回显数据
const detailsSingleVisible = ref(false); // 工序详情的 key
const customizedTypeId = ref(null);
const addOpenType = ref(1);

/**  获取列表数据 */
const getList = async () => {
    loading.value = true;
    try {
        const { code, rows, total } = await getFinalDraftListApi(queryParams.value);
        if (code == 200) {
            typeList.value = rows;
            totalData.value = total;
            loading.value = false;
        };
    } catch (error) {
        loading.value = false;
    }

};

/** 查看工序详情 */
const getProcessDetails = async (row: any) => {
    customizedTypeId.value = row.id
    detailsSingleVisible.value = true;
}

/** 修改定制类型 */
const modifyList = async (row: any) => {
    addSingleObj.value = row;
    addOpenType.value = 2
    addSingleVisible.value = true;
}

/** 查看详情 */
const handleClickDetail = async (row: any) => {
    addSingleObj.value = row;
    addOpenType.value = 3
    addSingleVisible.value = true;
};

/** 删除定制类型 */
const deleteList = async (row: any) => {
    ElMessageBox.confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {

        const { code } = await deleteFinalDraftApi(row.id)
        if (code == 200) {
            proxy?.$modal.msgSuccess('删除成功');
            getList()
        }

    })
}


/** 新增定制类型 */
// 确认
const handleAddSubmit = async (e: any) => {
    getList()
};
// 关闭弹窗
const handleAddClose = () => {
    addSingleVisible.value = false;
    addSingleObj.value = {};
}

onMounted(() => {
    getList();
});

</script>
<style lang="scss" scoped></style>